import React, { useEffect, useState } from 'react'
import './index.scss'
import Search from '../../components/search'
import axios from '../../utils/axios'
import FriendList from './friend-list'
import {useHistory} from 'react-router-dom'
import icon from './images/qun.png'
export default function Friends() {
  const history = useHistory()
  const [friendName, setFriendName] = useState([])
  const [groupName, setGroupName] = useState([])
  const [searchFriendName, setSearchFriendName] = useState([])
  const [groupNum,setGroupNum] =  useState(0)
  const [friendNum, setFriendNum] = useState(0)
  useEffect(() => {
    // 获取朋友列表
    axios.get('/userFriend/getFriendList').then((res) => {
      setFriendName(res.data.data)
    })
    // 获取群聊列表
    axios.get('/group/getGroupList').then((res) => {
      setGroupName(res.data.data)
    })
  }, [])
  const onSearch = (v)=>{
    history.push('/sear')
    axios.get(`/userFriend/searchFriendByName?username=${v.current.value}`).then(res=>{
      setSearchFriendName(res.data.data)
    })
  }
  const onChange = (v)=>{
   v.current.value && axios
       .get(`/userFriend/searchFriendByName?username=${v.current.value}`)
       .then((res) => {
         setSearchFriendName(res.data.data)
       })
  }
      const getList = () => {
      axios.get(`/group/applyList`).then((res) => {
        // 申请添加我
        console.log(res.data.data, 999)
        for(let item of res.data.data){
          if(item.applyStatus === 0){
             setGroupNum(groupNum + 1)
          }
        }
      })
        axios.get(`/friend/applyList`).then((res) => {
        // 申请添加我
           for (let item of res.data.data) {
             if (item.applyStatus === 0) {
               setFriendNum(friendNum + 1)
             }
           }
      })
    }
  return (
    <div className="friend-list">
      <Search
        placeholderText="输入搜索好友"
        width="98vw"
        toSubmit={onSearch}
        onChange={onChange}
      ></Search>
      {/* 群通知 */}
      <FriendList
        number={groupNum}
        imgSrc={icon}
        username={'群通知'}
        toDetail={() => {
          history.push(`/applyList?type=group`)
        }}
      ></FriendList>
      {/* 新的朋友通知 */}
      <FriendList
        number={friendNum}
        username={'新的朋友'}
        toDetail={() => {
          history.push(`/applyList?type=friend`)
        }}
      ></FriendList>
      {/* 朋友列表 */}
      {friendName.map((item) => {
        return (
          <>
            <FriendList
              username={item.username}
              key={item.username}
              imgSrc={item.avatar}
              toDetail={() => {
                history.push(
                  `/roomDetail?friendid=${item.friendid}&username=${item.username}`
                )
                console.log(history.location.pathname)
              }}
            ></FriendList>
          </>
        )
      })}
      {/* 群聊列表 */}
      {groupName.map((item) => {
        return (
          <>
            <FriendList
              username={item.groupName}
              key={item.groupName}
              imgSrc={item.avatar || icon}
              toDetail={() => {
                history.push(
                  `/roomDetail?groupid=${item.groupid}&groupName=${item.groupName}`
                )
                console.log(history.location.pathname)
              }}
            ></FriendList>
          </>
        )
      })}
    </div>
  )
}
